<template>
    <div class="container">
        <HeaderBar
            current="category"
        />
        <div class="container_main">
            <div class="content">
                <div class="content-title">
                    <img
                        src="../../assets/images/back.png"
                        class="content-title-icon"
                        @click="back()"
                    />
                    {{searchname || ''}}
                </div>
                <div class="category-list" v-if="type == 'category'">
                    <div
                        class="category-list-item"
                        v-for="item in category"
                        :key="item.id"
                        @click="chooseCategory(item.id)"
                    >
                        <div
                            class="category-list-item-main"
                            :class="{active: secondCategoryId.indexOf(item.id) > -1}"
                        >
                            <span>{{item.name}}</span>
                            <img
                                :src="item.picture"
                                class="category-list-item-img"
                            />
                        </div>
                    </div>
                </div>
                <div class="content-filiter">
                    分类筛选
                    <div class="content-filiter-clear" @click="reset">清空</div>
                </div>
                <div class="content-filiters">
                    <div class="content-filiters-item" v-if="styleList.length > 0">
                        <div class="content-filiters-item-label">风格</div>
                        <div
                            class="content-filiters-item-values clearfix"
                            v-if="styleList.length"
                        >
                            <div
                                class="content-filiters-item-values-single"
                                v-for="(item, index) in styleList"
                                :class="{active: style.indexOf(item) > -1}"
                                :key="index"
                                @click="chooseStyle(item)"
                            >
                                {{item}}
                            </div>
                        </div>
                    </div>
                    <div class="content-filiters-item" v-if="colorList.length > 0">
                        <div class="content-filiters-item-label">颜色</div>
                        <div
                            class="content-filiters-item-values"
                            v-if="colorList.length"
                        >
                            <div
                                v-for="(item, index) in colorList"
                                :key="index"
                                class="content-filiters-item-values-color"
                                :class="{active: color.indexOf(item) > -1}"
                                :style="{background: `#${item}`}"
                                @click="chooseColor(item)"
                            >
                                <img
                                    src="../../assets/images/dui.png"
                                    class="content-filiters-item-values-icon"
                                />
                            </div>
                        </div>
                    </div>
                    <div class="content-filiters-item">
                        <div class="content-filiters-item-label">价格</div>
                        <div class="content-filiters-item-values">
                            <div class="content-filiters-item-values-item" @click="changeOrderType(1)">
                                <img
                                    :src="orderType == 1 ? require('../../assets/images/icon1.png') : require('../../assets/images/icon.png')"
                                    class="content-filiters-item-values-item-icon"
                                />
                                从高到低
                            </div>
                            <div class="content-filiters-item-values-item" @click="changeOrderType(2)">
                                <img
                                    :src="orderType == 2 ? require('../../assets/images/icon1.png') : require('../../assets/images/icon.png')"
                                    class="content-filiters-item-values-item-icon"
                                />
                                从低到高
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="goods_list" v-if="list.length > 0">
                <div
                    class="goods_list_item"
                    v-for="item in list"
                    :key="item.id"
                    @click="showDetail(item.id)"
                >
                    <img
                        :src="item.mainPic"
                        class="goods_list_item_pic"
                    />
                    <div class="goods_list_item_main">
                        <div
                            class="goods_list_item_main_title clamp"
                            :title="item.name"
                        >
                            {{item.name}}
                        </div>
                        <div class="goods_list_item_main_desc">¥{{item.price}}</div>
                    </div>
                </div>
            </div>
            <div class="empty" v-else>暂未符合条件的发现商品</div>
        </div>
    </div>
</template>
<script>
import {
    getCategoryList,
    getStyleList,
    getColorList
} from '@api/shop';
import {
    GetGoodsList
} from '@api/api';
import HeaderBar from '@components/HeaderBar';
export default {
    data() {
        return {
            id: null,
            type: '',
            searchname: '',
            name: '',
            styleList: [],
            colorList: [],
            category: [],
            list: [],
            pageNo: 1,
            pageSize: 10,
            name: '',
            firstCategoryId: '',
            secondCategoryId: [],
            style: [],
            color: [],
            orderType: 1,
            totalCount: null,
            totalPage: null
        }
    },
    components: {
        HeaderBar,
    },
    created () {
        let {
            type,
            name = '',
            id,
            keyword = ''
        } = this.$route.query;
        this.type = type;
        this.searchname = decodeURI(name) || '';
        this.name = decodeURI(keyword) || '';
        this.id = id;
        this.firstCategoryId = Number(id);
        if (type == 'style') {
            this.id = null;
            this.firstCategoryId = '';
            this.style.push(this.searchname);
        }
        this.getStyle();
        this.getColor();
        if (type == "category") {
            this.getCategory();
        }
        this.getList();
    },
    methods: {
        back() {
            this.$router.go(-1);
        },
        getCategory() {
            getCategoryList()
                .then(res=>{
                    let {
                        data
                    } = res;
                    let category = [];
                    data.forEach(item=>{
                        if (item.id == this.id) {
                            category = item.child;
                        }
                    });
                    this.category = category;
                });
        },
        getStyle() {
            getStyleList()
                .then(res=>{
                    this.styleList = res.data;
                });
        },
        getColor() {
            getColorList()
                .then(res=>{
                    this.colorList = res.data;
                });
        },
        getList() {
            let params = {
                pageNo: this.pageNo,
                pageSize: this.pageSize,
                firstCategoryId: this.firstCategoryId,
                orderType: this.orderType
            }
            if (this.name != '') {
                params.name = this.name;
            }
            if (this.color.length > 0) {
                params.color = this.color;
            }
            if (this.style.length > 0) {
                params.style = this.style;
            }
            if (this.secondCategoryId.length > 0) {
                params.secondCategoryId = this.secondCategoryId;
            }
            GetGoodsList(params)
                .then(res=>{
                    this.list = res.data;
                    this.totalCount = res.totalCount;
                    this.totalPage = res.totalPage;
                });
        },
        showDetail(id) {
            this.$router.push({path: `/goods/${id}`});
        },
        chooseStyle(data) {
            let {
                style
            } = this;
            let flag = style.indexOf(data);
            if (flag == -1) {
                style.push(data);
            } else {
                style.splice(flag, 1)
            }
            this.style = style;
            this.getList();
        },
        chooseColor(data) {
            let {
                color
            } = this;
            let flag = color.indexOf(data);
            if (flag == -1) {
                color.push(data);
            } else {
                color.splice(flag, 1)
            }
            this.color = color;
            this.getList();
        },
        chooseCategory(id) {
            let {
                secondCategoryId
            } = this;
            let flag = secondCategoryId.indexOf(Number(id));
            if (flag == -1) {
                secondCategoryId.push(Number(id));
            } else {
                secondCategoryId.splice(flag, 1)
            }
            this.secondCategoryId = secondCategoryId;
            this.getList();
        },
        changeOrderType(type) {
            this.orderType = type;
            this.getList();
        },
        reset() {
            this.name = '';
            this.color = [];
            this.style = [];
            this.secondCategoryId = [];
            this.orderType = 1;
            this.getList();
        }
    },
    watch:{
        $route:{
            handler(val,oldval){
                if (decodeURI(val.query.keyword) != decodeURI(oldval.query.keyword)) {
                    this.name = decodeURI(val.query.keyword);
                    this.getList();
                }
            },
            // 深度观察监听
            deep: true
        }
    }
}
</script>
<style>
body {
    background: #F6F6F6 !important;
}
</style>
<style scoped>
    @import './search.css';
</style>